<template>
  <ZDropdown button-class="list-none" placement="end">
    <template #trigger>
      <ZAvatar class="size-10" :src="avatar" />
    </template>
    <ul class="menu dropdown-content bg-base-100 rounded-box z-1 p-2 shadow-sm">
      <li>
        <ZCard class="mb-2" visual="border">
          {{ userStore.user?.email }}
        </ZCard>
      </li>
      <li><RouterLink to="/">课程管理</RouterLink></li>
      <li><RouterLink to="/profile">个人信息管理</RouterLink></li>
      <li><a @click="onLogout">登出系统</a></li>
    </ul>
  </ZDropdown>
</template>
<script setup lang="ts">
import { computed } from "vue";
import ZCard from "@/components/ui/ZCard.vue";
import ZAvatar from "@/components/ui/ZAvatar.vue";
import ZDropdown from "@/components/ui/ZDropdown.vue";

import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const router = useRouter();
const avatar = computed(() => `/api/user/avatar/${userStore.user?.email}`);
function onLogout() {
  userStore.logout();
  router.push({ name: "login" });
}
</script>
